account import

2 files changed, 56 insertions, 0 deletions

diff --git a/src/routes/(app)/sent/[id]/+page.server.ts b/src/routes/(app)/sent/[id]/+page.server.ts
new file mode 100644
index 00000000..38d95e4e
--- /dev/null
+++ b/src/routes/(app)/sent/[id]/+page.server.ts
@@ -0,0 +1,7 @@
+import { get, auth } from "$lib/utils";
+
+export let load = async ({ cookies, params }) => {
+  let { id } = params;
+    let p  = await get(`/payments/${id}`, auth(cookies));
+  return p;
+};
diff --git a/src/routes/(app)/sent/[id]/+page.svelte b/src/routes/(app)/sent/[id]/+page.svelte
new file mode 100644
index 00000000..24804974
--- /dev/null
+++ b/src/routes/(app)/sent/[id]/+page.svelte
@@ -0,0 +1,49 @@
+<script>
+  import { fiat, f, focus, s, sat, sats } from "$lib/utils";
+  import { scale } from "svelte/transition";
+  import Icon from "$comp/Icon.svelte";
+  import { toast } from "@zerodevx/svelte-toast";
+  import { t } from "$lib/translations";
+
+  export let data;
+  let { amount, rate, tip, user } = data;
+  let { currency, username } = user;
+  amount = Math.abs(amount);
+
+  toast.pop(0);
+</script>
+
+<div class="text-center mt-20 md:mt-0">
+  <div
+    class="flex w-full max-w-[200px] mx-auto py-20"
+    in:scale={{ start: 0.5 }}
+  >
+    <Icon icon="check" style="mx-auto" />
+  </div>
+  <h1 class="text-3xl md:text-4xl font-bold mb-6">{$t("payments.sent")}!</h1>
+  <h2 class="text-2xl md:text-3xl font-semibold">
+    {f(fiat(amount, rate), currency)}
+    {#if tip}
+      <span class="text-lg">
+        + {f(fiat(tip, rate), currency)}
+      </span>
+    {/if}
+  </h2>
+  <h3 class="text-secondary md:text-lg mb-6 mt-1">
+    ⚡️{s(amount)}
+
+    {#if tip}
+      <span class="text-lg">
+        + ⚡️{s(tip)}
+      </span>
+    {/if}
+  </h3>
+</div>
+
+<a href={`/${username}`} use:focus>
+  <div class="opacity-0 w-screen h-screen fixed top-0 left-0 z-50" />
+</a>
+
+<div class="fixed bottom-10 w-full text-center">
+  {$t("payments.tapAnywhere")}
+</div>